<template>
  <div class="wrapper">
    <a-list item-layout="horizontal" :data-source="data">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta :description="item.desc">
            <template #title>
              <router-link :to="item.path">{{ item.title }}</router-link>
            </template>
            <template #avatar>
              <a-avatar style="background-color: #87d068; color: #fff">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { UserOutlined } from "@ant-design/icons-vue";

import { b } from "./b.js";
import { c } from "./c.js";

import { routes } from "../../route/index.js";

b();
c();

const data = ref(routes);
</script>

<style scoped lang="less">
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
</style>
